<template>
  <Layout :tab-id="1">
    <template #content>
      <view
        class="bg-gradient-to-b from-[#90b8fe] to-[#fff] flex flex-col items-center justify-start"
        :style="{ padding: `${useSafeArea.getSafeAreaTop + 140}rpx 0` }"
      >
        <view @click="toAddSupport">
          <wd-input custom-class="ipt " placeholder="我需要帮扶" disabled />
        </view>

        <view
          class="w-[98vw] h-[auto] flex flex-col justify-center items-center rounded-[20rpx] mt-3 gap-[30rpx]"
        >
          <view
            v-for="item in supportList"
            :key="item.id"
            class="w-[96%] h-[auto] flex flex-col justify-center text-[#fff] rounded-[30rpx] bg-[#fff]"
          >
            <view
              v-if="item.rescueImg"
              style="border-bottom: 2rpx solid #e5e5e5"
            >
              <image
                v-for="(img, index) in item.rescueImg"
                :key="index"
                class="h-[300rpx] rounded-tl-[20rpx] rounded-tr-[20rpx]"
                :src="img"
                :style="{ width: `${100 / item.rescueImg.length}%` }"
                mode="scaleToFill"
              />
            </view>
            <view
              class="w-[100%] h-[auto] flex flex-col justify-center items-start p-4"
            >
              <view
                class="w-[100%] h-[auto] flex flex-row justify-start items-center"
              >
                <image
                  :src="item.guardianAvatar"
                  mode="scaleToFill"
                  class="w-[60rpx] h-[60rpx] rounded-[30rpx]"
                />
                <text class="text-[26rpx] text-[#a1a8b0] ml-2">{{
                  item.guardianNickname
                }}</text>
              </view>
              <view
                class="w-[90%] h-[auto] flex flex-col justify-center items-start mt-2"
              >
                <text class="text-[26rpx] text-[#000] mb-1">{{
                  item.childName
                }}</text>
                <text class="text-[26rpx] text-[#a1a8b0]">{{
                  item.rescueContent
                }}</text>
              </view>
            </view>
            <view
              class="w-[100%] h-[auto] flex justify-between items-center mt-2"
            >
              <view
                class="w-[80%] h-[80rpx] flex flex-row justify-start items-center ml-4"
              >
                <text class="text-[26rpx] text-[#3ea0ff]"> #儿童帮扶 </text>
                <text class="text-[26rpx] text-[#3ea0ff] ml-2">
                  #偏远乡村
                </text>
              </view>
              <view
                class="w-[20%] h-[80rpx] flex flex-row justify-end items-center mr-1 mb-1"
              >
                <wd-button
                  custom-class="w-[200rpx] h-[80rpx] mr-1"
                  type="primary"
                  @click="handleAddRescueRecord(item)"
                >
                  帮扶
                </wd-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>
  </Layout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import Layout from '@/components/Layout/tabbarLayout.vue'
import useStore from '@/store'
import { getRescueList, addRescueRecord } from '@/api/rescue.api'

const userInfo = uni.getStorageSync('user')

const { useSafeArea } = useStore()

const supportList = ref<RescueInfo[]>([])

const toAddSupport = () => {
  uni.navigateTo({
    url: '/pages/support/supportAdd'
  })
}

const handleAddRescueRecord = async (item: RescueInfo) => {
  const res = await addRescueRecord({
    rescueInfoId: item.id,
    userId: userInfo.id
  })
  if (res.code === 200) {
    uni.showToast({
      title: '帮扶成功'
    })
  } else {
    uni.showToast({
      title: res.message || '帮扶失败'
    })
  }
}

onShow(async () => {
  const res = await getRescueList<any, RescueInfo>({
    page: 1,
    pageSize: 100
  })
  if (res.code === 200) {
    supportList.value = res.data.items || []
  }
})
</script>

<style lang="scss" scoped>
:deep(.wd-input) {
  width: 95vw !important;
  border-radius: 20rpx;
}
</style>
